<template>
    <div>
        <h1>{{ number }}</h1>
        <h2>{{ num1 }} <button @click="num1++">num1自增</button></h2>
        <h2>{{ num2 }} <button @click="num2++">num2自增</button></h2>
        <hr>
        <h2>全部的工资：{{ all }}</h2>
        <h3>工龄：{{ info.workAge }}
            <button @click="update1">自增</button>
        </h3>
        <h3>等级：{{ info.title.lev }}

            <button @click="update">自增</button>
        </h3>

        <h1>{{ info.title.sum.um }}</h1>
    </div>

</template>


<script setup>
import { watch, ref, reactive, watchEffect,shallowRef,triggerRef } from 'vue';
const num1 = ref(10)
const num2 = ref(15)
const number = ref(25)
const all = ref(10)
const info = shallowRef(
    {
        workAge: 0,
        title: {
            name: '教授',
            lev: 2,
            sum:{
                um:10
            }
        }
    }
)

function update() {
    info.value.title.lev++
    // 强制触发
    triggerRef(info)
    console.log(info);
    console.log( info.value.title.lev);
}
function update1(){
    info.value.workAge++
    console.log(info.value.workAge);
    
}


watchEffect(()=>{
    number.value=num1.value+num2.value
    all.value=10+info.value.workAge*0.1+(info.value.title.lev-1)*0.5
})


</script>